<template>
  <div class="index_main">
    <el-container>
      <el-header>
        <div class="logo" >
          <img src="../assets/img/logo.png" alt="Logo" >
        </div>
        <div class="nav-bar">
          <div class="nav-links">
            <div class="nav-item" @click="toHome">首页</div>
            <div class="nav-item" @click="toMyCollect">收藏</div>
            <div class="nav-item" @click="toMyLike">喜欢</div>
            <div class="nav-item" @click="toMyPost">我的</div>
          </div>
        </div>
        <!-- 将头像放在导航栏之后，并确保它浮动到右侧 -->
        <div class="avatar" @click="toUserInfo">
          <el-avatar size="30" :src="avatarurl" alt="用户"></el-avatar>
        </div>
      </el-header>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>


<script setup>
import {onMounted, ref} from "vue";
import {getUidWithExpiration} from "@/components/cookie";
import {getUserInfo} from "@/http/api";
import router from "@/router/index";

const avatarurl =ref()
const url = "/src/assets/img/avatar/"

const userid = ref(getUidWithExpiration())

onMounted(() => {
  getUserInfo({uid: userid.value}).then((res)=>{
    if (res.code === 10000){
      avatarurl.value = url+res.data.avatar
    }
  })
})

function toUserInfo(){
  router.push('/userinfo/'+userid.value)
  console.log(userid.value)
}

function toHome(){
  router.push('/')
}

function toMyPost(){
  router.push('/mypost')
}

function toMyLike(){
  router.push('/mylikepost')
}

function toMyCollect(){
  router.push('/mycollectpost')
}

</script>

<style scoped>
.index_main {
  width: 100vw;
}

.logo img {
  width: 100px;
}

.el-header {
  background-color: rgba(193, 197, 203, 0.41);
  color: #333;
  padding: 0 20px; /* 添加内边距以容纳边缘内容 */
  height: 60px;
  width: 100vw;
  display: flex; /* 使用Flexbox来布局子元素 */
  align-items: center; /* 子元素在垂直方向上居中对齐 */
  justify-content: space-between; /* 子元素在水平方向上两端对齐 */
}


.el-main {
  background-color: #ffffff;
  color: #333;
  min-height: 615px;
  width: 100vw;
  padding: 0;
}

.nav-bar {
  margin-left: 28%;
  display: flex;
  align-items: center; /* 垂直居中对齐子元素（如果需要） */
  justify-content: space-between; /* 子元素两端对齐，但不适用于中间的链接 */
}

.nav-links {
  display: flex;
  align-items: center; /* 垂直居中对齐链接 */
  justify-content: center; /* 水平居中对齐链接 */
}

.nav-item {
  margin-right: 100px; /* 每个链接右侧添加100px的间距 */
  /* 为了使最后一个链接右侧没有间距，你可能需要使用其他技术（例如使用 :last-child 选择器） */
}

.nav-item:last-child {
  margin-right: 0; /* 移除最后一个链接的右侧间距 */
}

.avatar {
  /* float: right; 这行可以移除，因为.el-header已经使用了Flexbox */
  margin-left: auto; /* 这会将.avatar推到容器的右侧 */
}
</style>